<template>
  <div class="app-container">
    <!--聊天的页面-->
    <div id="main-content" ref="mainContent">
      <!--   头部信息   -->
      <div class="top-panel" ref="topPanel">
        <!--左侧图标-->
        <div class="left-panel">
          <div
            class="icon-panel"
            @mouseover="showLeftIco(true)"
            @mouseleave="showLeftIco(false)"
          >
            <div class="fillet-ico-panel close-ico">
              <img
                :style="{ display: leftIco }"
                src="@/assets/img/close.png"
                alt=""
              />
            </div>

            <div class="fillet-ico-panel mini-ico">
              <img
                :style="{ display: leftIco }"
                src="@/assets/img/min.png"
                alt=""
              />
            </div>
            <div class="fillet-ico-panel max-ico">
              <img
                :style="{ display: leftIco }"
                src="@/assets/img/max.png"
                alt=""
              />
            </div>
          </div>
          <div class="search-panel">
            <div class="search">
              <img
                src="@/assets/img/search_editText@2x.png"
                alt=""
                :style="{ display: searchImg }"
              />
              <label>
                <input
                  type="text"
                  @focus="hideSearchImg"
                  @blur="showSearchImg"
                  v-model="searchContent"
                />
              </label>
            </div>
            <div
              class="add-panel"
              @mouseleave="createGroupChat(false)"
              @mouseup="createGroupChat(false)"
              @mousedown="createGroupChat(true)"
              :style="{ background: addBackground }"
            >
              <img src="@/assets/img/create_discuss_simple@2x.png" alt=""/>
            </div>
          </div>
        </div>
        <div class="right-panel">
          <!--功能切换 路由入口-->
          <div class="function-switching-panel">
            <router-link :to="{ name: 'message' }" custom v-slot="{ navigate }">
              <div
                class="main-ico-area"
                @click="navigate"
                @keypress.enter="navigate"
                role="link"
              >
                <img
                  :src="
                  currentComponentName === 'message' ||
                  currentComponentName === 'messageDisplay'
                    ? messageIcoActive
                    : messageIco
                "
                  alt="消息"
                />
              </div>
            </router-link>
            <router-link :to="{ name: 'list' }" custom v-slot="{ navigate }">
              <div
                class="main-ico-area"
                @click="navigate"
                @keypress.enter="navigate"
                role="link"
              >
                <img
                  :src="
                  currentComponentName === 'list' ||
                  currentComponentName === 'dataPanel'
                    ? contactIcoActive
                    : contactIco
                "
                  alt="好友列表"
                />
              </div>
            </router-link>
            <router-link :to="{ name: 'more' }" custom v-slot="{ navigate }">
              <div
                class="main-ico-area"
                @click="navigate"
                @keypress.enter="navigate"
                role="link"
              >
                <img
                  :src="currentComponentName === 'more' ? moreIcoActive : moreIco"
                  alt="更多"
                />
              </div>
            </router-link>
          </div>
          <!--头像区域-->
          <div class="avatar-area-panel">
            <!--在线状态-->
            <div class="status-panel"></div>
            <div class="avatar-panel">
              <img :src="avatar" alt="头像"/>
            </div>
          </div>

        </div>
      </div>
        <msgList/>
    </div>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import msgList from "@/components/Chat/msg-list";

  export default {
    name: 'main-content',
    components: {msgList},
    data() {
      return {
        currentComponentName: '',
        searchContent: '',
        searchImg: 'block',
        addBackground: '#ffffff',
        leftIco: 'none',
        messageIco: require('@/assets/img/menu-message-normal@2x.png'),
        messageIcoActive: require('@/assets/img/menu-message-down@2x.png'),
        contactIco: require('@/assets/img/menu-contact-normal@2x.png'),
        contactIcoActive: require('@/assets/img/menu-contact-down@2x.png'),
        moreIco: require('@/assets/img/menu-more-normal@2x.png'),
        moreIcoActive: require('@/assets/img/menu-more-down@2x.png')
      }
    }, computed: {
      ...mapGetters([
        'avatar'
      ])
    },
    methods: {
      showLeftIco(status) {
        if (status) {
          this.leftIco = 'block'
        } else {
          this.leftIco = 'none'
        }
      },
      // 显示搜索图标
      showSearchImg() {
        // 判断当前输入框是否有数据
        if (this.searchContent == '') {
          this.searchImg = 'block'
        } else {
          this.searchImg = 'none'
        }
      },
      // 隐藏搜索图标
      hideSearchImg() {
        this.searchImg = 'none'
      },  // 创建群聊
      createGroupChat(status) {
        if (status) {
          this.addBackground = '#E1E3E5'
        } else {
          this.addBackground = '#ffffff'
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

  $topColor: #E1E3E5;
  $leftWidth: 15%;
  $rightWidth: 85%;

  /*图标样式*/
  .fillet-ico-panel {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    margin-right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 9px;
      height: 9px;
    }
  }

  .close-ico {
    background: #F06C5A;
  }

  .mini-ico {
    background: #F9BE45;

    img {
      width: 11px;
      height: 11px;
    }
  }

  .max-ico {
    background: #61C350;

    img {
      width: 11px;
      height: 11px;
    }
  }

  #main-content {
    width: 96.5%;
    height: 90%;
    background: #FDFCFC;
    position: absolute;
    margin: auto;
    border-radius: 5px;
    overflow: hidden;

    /*顶部菜单栏样式*/
    .top-panel {
      width: 100%;
      height: 55px;
      background: $topColor;
      display: flex;
      align-items: center;

      .left-panel {
        min-width: 214px;
        width: $leftWidth;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .icon-panel {
          width: 30%;
          height: 30px;
          display: flex;
          align-items: center;
        }

        .search-panel {
          width: 60%;
          height: 30px;
          display: flex;
          align-items: center;

          .search {
            width: 100px;
            height: 24px;
            background: #FFFFFF;
            border-radius: 15px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            img {
              width: 14px;
              height: 14px;
              position: absolute;
              left: 11px;
            }

            input {
              width: 80%;
              height: 100%;
              margin-left: 12px;
              outline: none;
              border: none;
            }
          }

          .add-panel {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #ffffff;
            margin-left: 10px;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              width: 16px;
              height: 16px;
            }
          }
        }
      }

      .right-panel {
        width: $rightWidth;
        height: 100%;
        display: flex;
        align-items: center;

        .function-switching-panel {
          width: 90%;
          min-width: 180px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;

          .main-ico-area {
            width: 28px;
            height: 28px;
            margin-right: 38px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .avatar-area-panel {
          width: 10%;
          min-width: 80px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;

          .status-panel {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            overflow: hidden;
            background: #73d546;
            position: absolute;
            bottom: -2px;
            right: 55.1%;
          }

          .offline {
            background: #B4B8BA;
          }

          .avatar-panel {
            width: 30px;
            height: 30px;
            overflow: hidden;
            border-radius: 50%;

            img {
              width: 100%;
              height: 100%;
            }
          }

        }
      }
    }

    /*主体内容样式*/
    .main-content-view {
      width: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      height: calc(100% - 55px);
    }

    // 右键菜单样式
    .right-menu {
      position: fixed;
      left: 0;
      top: 0;
      width: 166px;
      height: auto;
      background-color: rgb(242, 242, 242);
      border: solid 1px #C2C1C2;
      box-shadow: 0 10px 10px #C2C1C2;
      display: none;
      border-radius: 5px;

      ul {
        padding: 0;
        margin: 0;
        font-size: 15px;

        li {
          list-style: none;
          box-sizing: border-box;
          padding: 6px 0;
          border-bottom: 1px solid rgb(216, 216, 217);

          &:nth-child(1) {
            padding-top: 2px;
          }

          &:nth-last-child(1) {
            border-bottom: none;
          }

          span {
            display: block;
            height: 20px;
            line-height: 20px;
            padding-left: 16px;

            &:hover {
              background-color: #0070F5;
              cursor: pointer;
              color: #FFFFFF;
            }
          }

          // 禁止点击样式
          .disable {
            color: #666666;

            &:hover {
              cursor: not-allowed;
              background-color: #F2F2F2;
              color: #666666;
            }
          }
        }
      }
    }
  }

</style>
